<template>
    <el-row class="tac">
        <el-col :span="12" style="width: 134px;height: 100%;">
          <el-menu
            default-active="this.$route.path" 
            router
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item :index="item.path" v-for="(item,index) in list" class="el-menu" >  
                <i class="el-icon-location"></i>
                <span >{{item.route_cn_name}}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
     </el-row>
</template>
<script>

export default{
    data() {
        return {
          list:[],
        }
    },
     async created() {
        let res = await this.$http.get('/user/info')
        this.list=res.data.menuPermissions;
        console.log(res.data.menuPermissions);
    },
    methods: {
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        console.log(key, keyPath);
    }     
  },
}
</script>
<style scoped>
.el-menu-vertical-demo{
  height: 100vh;
}
.el-menu-vertical-demo  span{
  color:#008080;
}

</style>